<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息展示</title>
    <!--引入vue的开发库-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="showstu.css">
    <script src="axios.js"></script>
</head>
<body>
    <div id="app">
        <div class="insert">
            <div v-show="show1"> 学号:<input type="text" v-model="adddate.id"><br>
                姓名:<input type="text" v-model="adddate.name"><br>
                年龄:<input type="text" v-model="adddate.age"><br>
                身高:<input type="text" v-model="adddate.height"><br>
                学校:<input type="text" v-model="adddate.school"><br>
                <button @click="add()">提交数据</button>
            </div>

            <div class="update" v-show="show"> 学号:<input type="text" v-model="adddate.id"><br>
                姓名:<input type="text" v-model="adddate.name"><br>
                年龄:<input type="text" v-model="adddate.age"><br>
                身高:<input type="text" v-model="adddate.height"><br>
                学校:<input type="text" v-model="adddate.school"><br>
                <button @click="updateok()">更新数据</button>
            </div>
        </div>
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>身高</th>
                <th>学校</th>
                <th>操作1</th>
                <th>操作2</th>
            </tr>
            <tr v-for="(value,index) in msg">
                <td>{{msg[index].id}}</td>
                <td>{{msg[index].name}}</td>
                <td>{{msg[index].age}}</td>
                <td>{{msg[index].height}}</td>
                <td>{{msg[index].school}}</td>
                <td><a href="#" v-on:click="del(index,msg[index].id)">删除</a></td>
                <td><a href="#" v-on:click="update(index)">更新</a></td>
            </tr>
        </table>
    </div>  
    <script src="showstu.js"></script>
</body>
</html>